<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" :destroy-on-close="true" :with-header="false" class="demand_box" size='960px' @close="closeData">
        <div class="flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="tren_head flexbox flexcenter flexbetween">
                <div class="tren_info">
                    <div class="mt_name">{{name}}</div>
                    <span class="mt_id">ID：{{this.queryInfo.material_id}}</span>
                </div>
                <span class="icon_btn icon_btn_32"><img src="../../assets/img/close_check.svg" alt="" @click="closeData"></span>
            </div>
            <div class="tren_time flexbox flexcenter flexbetween">
                <div class="font_16 color_01">账户消耗统计</div>
                <el-date-picker style="width:260px" value-format="yyyy-MM-dd" v-model="queryInfo.date" type="daterange" size="small" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="getDataList(1)">
                </el-date-picker>
            </div>
            <div class="demand_center flex">
                <el-table :data="tableData" class="com_table" ref="trend_table" height="100%" row-key="advertiser_id" @expand-change="selectTren">
                    <el-table-column type="expand" label="数据趋势" width="120">
                        <template slot-scope="props">
                            <div :id="props.row.advertiser_id" style="height:300px;width:100%"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="advertiser_name" label="账户名称" min-width="150">
                    </el-table-column>
                    <el-table-column prop="advertiser_id" label="账户 ID" min-width="150">
                    </el-table-column>
                    <el-table-column prop="stat_cost" label="消耗">
                    </el-table-column>
                    <el-table-column prop="pay_order_amount" label="GMV">
                    </el-table-column>
                    <el-table-column prop="roi" label="ROI">
                    </el-table-column>
                </el-table>
            </div>
            <div class="demand_footer flexbox flexcenter">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>
    </el-drawer>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            name:null,
            queryInfo: {
                page: 1,
                limit: 20,
                material_id: "",
                date: [],
            },
            tableData: [],
        };
    },
    created() {
        
    },
    methods: {
        getData(row){
            this.dialogVisible = true
            this.queryInfo.material_id = row.material_id
            this.name = row.material_name
            this.getDataList(1);
        },
        //获取数据
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/material/materialInfo",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
                this.$refs.trend_table.doLayout()
            }
        },

        //获取趋势
        async getTrend(row) {
            const { data: res } = await this.$http.post(
                "adminapi/material/materialTrend",
                {
                    material_id:this.queryInfo.material_id,
                    date:this.queryInfo.date,
                    advertiser_id:row.advertiser_id
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.timeChart(row,res.data)
            }
        },

        //数据图表
        timeChart(row,datas) {
            const myChart = this.$echarts.init(
                document.getElementById(row.advertiser_id)
            );
            var option = {
                color: ["#4475FF"],
                title: {},
                grid: {
                    left: "2%",
                    right: "2%",
                    bottom: "5%",
                    top:"5%",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        align: "left",
                    },
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#DFE2E7",
                            width: 0,
                            type: "dashed",
                        },
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "rgba(97, 108, 133, 0.6)",
                        },
                    },
                    data: datas.map(item=>{return item.batch_num}),
                },
                yAxis: {
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#F9F9F9",
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#B4B7BD ",
                        },
                    },
                },
                series: [
                    {
                        showSymbol: false,
                        smooth: true,
                        name: "消耗",
                        type: "line",
                        data: datas.map(item=>{return item.stat_cost}),
                        lineStyle: {
                            color: "#4475FF",
                            width: 2,
                        },
                    },
                ],
            };
            myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },

        selectTren(row, rows) {
            const isExtend = rows.some(r=>r.advertiser_id == row.advertiser_id)
            if(isExtend){
                this.getTrend(row)
            }
        },


        // 默认显示3天时间
        getTimeFn() {
            const that = this;
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
            that.$set(that.queryInfo.date, 0, that.formatDate(start));
            that.$set(that.queryInfo.date, 1, that.formatDate(end));
        },

        formatDate(date) {
            var myyear = date.getFullYear();
            var mymonth = date.getMonth() + 1;
            var myweekday = date.getDate();

            if (mymonth < 10) {
                mymonth = "0" + mymonth;
            }
            if (myweekday < 10) {
                myweekday = "0" + myweekday;
            }
            return myyear + "-" + mymonth + "-" + myweekday;
        },

        closeData(){
            this.dialogVisible = false
            this.queryInfo = {
                page: 1,
                limit: 20,
                material_id: "",
                date: [],
            }
            this.tableData = []
            this.$refs.trend_table.doLayout()
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {},
};
</script>


<style scoped>
.tren_head {
    height: 100px;
    margin: 0 20px;
    border-bottom: 1px solid #ebebeb;
}
.mt_name {
    font-size: 18px;
    color: #17233d;
    line-height: 25px;
    font-weight: bold;
}
.mt_id {
    font-size: 12px;
    color: #616c85;
    height: 23px;
    line-height: 23px;
    padding: 0 8px;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    margin-top: 12px;
    display: inline-block;
}
.tren_time {
    padding: 20px 20px 0 20px;
}
</style>

